<template>
  <div class="login-container">
    <el-form :model="ruleForm" :rules="rules"
             status-icon
             ref="ruleForm"
             label-position="left"
             label-width="0px"
             class="demo-ruleForm login-page"
    >
      <h3 class="title">宿舍管理系统登陆</h3>

      <el-form-item prop="username">
        <el-input type="text"
                  v-model="ruleForm.account"
                  placeholder="用户名"
        ></el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input type="password"
                  v-model="ruleForm.password"
                  placeholder="密码"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-radio v-model="type" label="systemAdmin">系统管理员</el-radio>
        <el-radio style="position: relative;left: 80px;" v-model="type" label="dormitoryAdmin">宿舍管理员</el-radio>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSubmit" :loading="logining">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return{
      logining:false,
      ruleForm:{
        account:'',
        password:''
      },
      type:'systemAdmin',
      rules:{
        account:[{required:true,message:'请输入用户名',trigger:'blur'}],
        password:[{required:true,message:'请输入密码',trigger:'blur'}]
      }
    }
  },
  methods:{
    handleSubmit(){
      this.$refs.ruleForm.validate((valid)=>{
        if (valid){
          this.logining=true;
          let _this=this;
          if (_this.type=='systemAdmin'){
            axios.get("http://192.168.163.234:8081/systemAdmin/login",{params:_this.ruleForm}).then(
                function(response){
                  _this.logining=false
                  if (response.data.code===-1){
                    _this.$alert('用户名不存在','提示',{
                      confirmButtonText:'确定'
                    })
                  }
                  if(response.data.code===-2){
                    _this.$alert('密码错误','提示',{
                      confirmButtonText:'确定'
                    })
                  }
                  if(response.data.code===0){
                    localStorage.setItem('systemAdmin',JSON.stringify(response.data.data))
                    _this.$router.replace({path:'/systemAdmin'})
                  }
                })
          }
          if (_this.type=='dormitoryAdmin'){
            axios.get("http://192.168.163.234:8081/dormitoryAdmin/login",{params:_this.ruleForm}).then(
                function(response){
                  _this.logining=false
                  if (response.data.code===-1){
                    _this.$alert('用户名不存在','提示',{
                      confirmButtonText:'确定'
                    })
                  }
                  if(response.data.code===-2){
                    _this.$alert('密码错误','提示',{
                      confirmButtonText:'确定'
                    })
                  }
                  if(response.data.code===0){
                    localStorage.setItem('dormitoryAdmin',JSON.stringify(response.data))
                    _this.$router.replace({path:'/dormitoryAdmin'})
                  }
                })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.login-container{
  width: 100%;
  height: 100%;
}
.login-page{
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background-color: #fff;
  border: 1px solid #cac6c6;
}
label.el-checkbox.rememberme{
  margin: 0px 0px 15px;
  text-align: left;
}
</style>
